{% extends "base.html" %}

{% block head %}
{{ super() }}

<meta name="description" content="" />
<link rel="stylesheet" href="/theme/css/homepage.css">

<script src="/theme/js/link-wait.js"></script>

{% endblock head %}

{% block body_class %}index{% endblock %}

{% block body %}
  {{ super() }}

  <div class="top-section">

    <header>
      <h1 id="alchorisma">{{ SITENAME }}</h1>
      <div class="introduction">
        <div class="definition">
          {% for p in pages %}
            {% if p.title == "definition" %}
              {{ p.content }}
            {% endif %}
          {% endfor %}
        </div>
        <div class="about">
          {% for p in pages %}
            {% if p.title == "about" %}
              {{ p.content }}
            {% endif %}
          {% endfor %}
        </div>
        <nav class="button-nav">
          <a class="vines-button" id="roots-button" href="/roots/about-alchorisma.html">roots of Alchorisma</a>
          <a class="vines-button" href="/map.html">Points of interest</a>
        </nav>
      </div>
    </header>

    <section id="pathways-intro">
      {% for p in pages %}
        {% if p.title == "pathways" %}
          {{ p.content }}
        {% endif %}
      {% endfor %}
    </section>

  </div>

  <nav id="entrances">

    <ul>
    {% for article in articles %}
      {% if article.category == "essays" %}
      <li>
        <div class="article-cart {{ article.category }}">
          <a class="map-link" href="{{ SITEURL }}/{{ article.url }}"></a>
          {% if article.category %}
          <div class="{{ article.category }} category">
            {{ article.category }}
          </div>
          {% endif %}
          <div class="details">
          <!-- <details open> -->
            <summary>
              <h2>{{ article.title }}</h2>
              <address class="author">By {{ article.authors|join(', ') }}</address>
            </summary>
            <main class="short-summary">
                {{ article.summary }}
            </main>
          <!-- </details> -->
          </div>
          <div class="touch">touch to enter</div>
        </div>
      </li>
      {% endif %}
    {% endfor %}
    </ul>

  </nav>

{% endblock body %}